<template>
  <div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <template>
        <el-tab-pane
          v-for="item in optList"
          :key="item.code"
          :name="item.code"
        >
          <span slot="label"><i :class="item.icon" /> {{ item.name }}</span>
        </el-tab-pane>
      </template>
    </el-tabs>
    <transition
      name="fade-transform"
      mode="out-in"
    >
      <router-view :key="key" />
    </transition>
    <compassword ref="refpassword" />
  </div>
</template>
<script>
import { SetCompetitionToken } from '@/lib/auth';
import compassword from './compassword/compassword.vue';
import {
  api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId
} from '@/extend/api/gameswaggerApi/app';
import { mapState } from 'vuex';
import { getRoles } from '@/lib/auth';
export default {

  name: 'GameDetail',
  components: {
    compassword
  },
  data () {
    return {
      activeName: '',
      optList: []
    };
  },
  computed: {
    ...mapState({
      tenantId: state => state.user.tenantId
    }),
    key () {
      const $route = this.$route;
      let _path = null;
      if ($route.meta.animateKey) {
        _path = $route.meta.animateKey.split('/');
        _path = _path.map(item => {
          if (item.indexOf(':') > -1) {
            return $route.params[item.replace(':', '')];
          }
          return item;
        });
        _path = _path.join('/');
      }
      return _path || this.$route.path;
    }
  },
  watch: {
    '$route': {
      handler: function (val, old) {
        this.init();
      }
    }
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      const $route = this.$route;
      this.gameId = this.$route.params.id;
      const _optList = [
        {
          code: 'GameEdit',
          name: '赛事编辑',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'GameCreateEvent',
          name: '创建项目',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'GameClassification',
          name: '项目分类',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'GameExpenses',
          name: '费用设置',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'GameSchedule',
          name: '日程安排',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'GameData',
          name: '数据管理',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'IntegralSetting',
          name: '积分设置',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'GameExecte',
          name: '赛事执行',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'LogisticsHotel',
          name: '后勤管理',
          icon: '',
          isShow: !!this.gameId,
          auth: ['Logistics']
        }
        // {
        //   code: 'GameAuth',
        //   name: '权限设置',
        //   icon: '',
        //   isShow: !!this.gameId
        // }
      ];
      this.activeName = $route.meta.activeTab || $route.name;
      const _showList = [];
      _optList.map(item => {
        if (item.isShow) {
          let _hasAuth = false;
          if (item.auth) {
            const roles = getRoles();
            item.auth.map(jtem => {
              if (roles.includes(jtem)) {
                _hasAuth = true;
              }
            });
          } else {
            _hasAuth = true;
          }
          if (_hasAuth) {
            _showList.push(item);
          }
        }
      });
      this.optList = _showList;
    },
    handleClick (val) {
      const { query } = this.$route;
      const name = val.name;
      if (val.name === 'GameExecte') {
        api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId(this.gameId).then(res => {
          if (res.hasPassword) {
            this.$refs.refpassword.passwordVisible = true;
            this.$refs.refpassword.gameId = this.gameId;
            this.$refs.refpassword.buthiden = true;
            this.$refs.refpassword.tenantId = this.tenantId;
            this.$refs.refpassword.query = query;
            this.activeName = this.$route.meta.activeTab || this.$route.name;
          } else {
            SetCompetitionToken(this.gameId + ';');
            this.$router.push({
              name: name,
              params: { tenantId: 't__' + (this.tenantId || '') },
              query: {
                query: query
              }
            });
          }
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
        return;
      }
      SetCompetitionToken(this.gameId + ';');
      query.gameName = query.gameName || '';
      this.$router.push({
        name: name,
        params: {
          tenantId: 't__' + (this.tenantId || '')
        },
        query: query
      });
    }
  }
};
</script>
